<template>
  <div>
    <search-module :search="search" :table="table">
      <!-- add search-module btns template -->
   </search-module>
    <table-module :table="table">
      <template #newAmount="scope"><div>{{ scope.row.newAmount}}</div></template>
    </table-module>
  </div>
</template>
<script lang="ts" setup>
import { handleInit, pageConfig } from '@/utils'
import { handleData } from 'lz-utils-lib'
import axios from '@/utils/request'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, reactive } from "vue"

const _global_options = reactive({})
_global_options.status = [] 
_global_options.status = [{ label: '', value: ''}, { label: '', value: ''}]
axios.post({ url: 'https://www.baidu.com', data: {} }).then((res) => {
    _global_options.status.length = 0
    _global_options.status.push(...handleData.formatOptions(res.data, 'name', 'code'))
})

/* add custom function */

const ConfigData = () =>
  pageConfig({
  "search": {
    "caseId": {
      "label": "案件ID",
      "clearable": true
    },
    "status": {
      "label": "提额结果",
      "clearable": true,
      "el": "select",
      "options": _global_options.status
    },
    "operator": {
      "label": "操作人",
      "clearable": true,
      "el": "select",
      "options": _global_options.status
    },
    "applyStartTime,applyEndTime": {
      "label": "申请时间",
      "clearable": true,
      "el": "date",
      "type": "datetimerange",
      "defaultTime": [
        "2000-01-31T16:00:00.000Z",
        "2000-02-01T15:59:59.000Z"
      ]
    }
  },
  "table": {
    "caseId": {
      "label": "案件D"
    },
    "gmtCreate": {
      "label": "申请时间",
      "width": 160
    },
    "operator": {
      "label": "操作人",
      "formatter": (row) => _global_options.status.find((e) => e.value === row.aa)?.label
    },
    "status": {
      "label": "提额结果",
      "formatter": (row) => _global_options.status.find((e) => e.value === row.aa)?.label
    },
    "increaseAmount": {
      "label": "提额额度"
    },
    "newAmount": {
      "label": "。技提额后额度",
      "slot": "newAmount"
    },
    "type": {
      "label": "额度类型",
      "formatter": (row) => _global_options.status.find((e) => e.value === row.aa)?.label
    },
    "expirationDate": {
      "label": "到期时间",
      "width": 160
    }
  }
})

const { search, table, } = handleInit(ConfigData(), (data: any) => 
  axios.post({ url: "/caseCenter/quota/page", data }))
table.value.$onGetData(table.value, 1, search)
</script>

<style scoped></style>